<!-- <template>
  <div :id="chartId" class="fill"></div>
</template>

<script setup name="ChartData">
import { lightningChart } from '@arction/lcjs'
import { ref,onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
let chartId=ref()
let chart=null//不添加响应式，方式消耗性能
let props=defineProps(['points'])
function createChart() {
  chart = lightningChart().ChartXY({ container: `${chartId.value}` })
  chart.setTitle('Getting Started')
  const lineSeries = chart.addLineSeries()
  lineSeries.setStrokeStyle((style) => style.setThickness(5))
  lineSeries.add(props.points)

  chart.mount(this.$refs.chartContainer);
}
onBeforeMount(() => {
  chartId.value = Math.trunc(Math.random() * 1000000)
})
onMounted(() => {
  createChart()
})
onBeforeUnmount(() => {
  chart.dispose()
})

</script>
<style scoped>
.fill {
  height: 100%;
}
</style> -->